<template>
    <div class="page-community-reply-editor">
        <CustomNav title="评论" type="white" :fixed="true"></CustomNav>
        <CustomNav title="评论" :opacity="0"></CustomNav>
        <div class="textarea-wrap normal-text">
            <textarea v-model="content" class="textarea" :placeholder="placeholder"></textarea>
        </div>
        <div class="btn-wrap">
            <div class="btn btn-mobile btn-red btn-large btn-block btn-round"
                :class="{'disabled': !isButtonEnabled}"
                @click="onClickConfirm">
                发表评论
            </div>
        </div>
    </div>
</template>

<script>
import CustomNav from '@/components/nav/customNav.vue';
import store from '@/store';
import mixin from '@/lib/mixin';

export default {
    name: 'ReplyEditor',
    mixins: [
        mixin,
    ],
    components: {
        CustomNav,
    },
    data() {
        return {
            postId: null,
            content: '',
            placeholder: '请输入评论',
        };
    },
    computed: {
        isButtonEnabled() {
            return this.content.trim().length > 0;
        },
    },
    methods: {
        async onClickConfirm() {
            if (!this.isButtonEnabled) {
                return;
            }
            store.commit('utils/startRequest');
            const rdata = await store.dispatch('community/publishComment', {
                postId: this.postId,
                content: this.content,
            });
            store.commit('utils/endRequest');
            if (rdata.status === 0) {
                wx.showToast({
                    title: `评论成功`,
                    icon: 'none',
                });
                wx.navigateBack();
            }
        },
    },
    created(query) {
        this.content = '';
        this.postId = query.id;
    },
    onReachBottom() {
    },
};
</script>

<style lang="less">
@import "../../lib/style/mixins.less";

.page-community-reply-editor {
    padding: 18px 18px 0;
    box-sizing: border-box;
    .textarea-wrap {
        padding: 12px 12px 9px;
        background-color: #ededed;
        border-radius: 4px;
    }
    .textarea {
        width: 100%;
        height: @text-normal-line-height * 4;
        background-color: transparent;
        box-sizing: border-box;
    }
    .text-length {
        color: #aaaaaa;
        text-align: right;
    }
    .btn-wrap {
        padding-top: 17px;
    }
}
</style>
